<template>
<!-- 试卷详情页面{{ answerSheetId }} -->
<div class="big-box">
    <div class="box-left">
        <div style="position: sticky; top: 20px">
            <div class="answer-sheet">
                <span @click="$router.back">返回上一级</span>   
            </div>
            <div class="grade">
                我的总成绩:{{ totalScore }}
            </div>
        </div>
    </div>

        <div class="box-right">
            <!-- 整张试卷题目等 -->
            <div class="exam-main-title">
                <span style="font-family: '华文新魏'; font-size: 36px">{{ ExamInfo.title }}</span>
                <span style="font-family: '华文楷体'; margin: 10px 0px 10px 0px;font-size: 20px;">
                    题目数量:{{ topicNumber }}&nbsp;&nbsp;满分:{{ ExamInfo.fullMark }}
                </span>
            </div>

            <!-- 试题 -->
            <div @click="getChenge" v-for="(topicItem, index) in ExamInfo.topics" :key="index" class="exam-details">
                <!-- 试题 -->
                <div class="shi-ti-style">
                    <!-- 题目 -->
                    <span>{{ index + 1 }}、{{ topicItem.title }}【分值:{{ topicItem.score }}】</span>
                    <!-- 选项 -->
                    <div class="xuan-xiang-style">
                        <!-- 单选 -->
                        <!-- 找到对应的答题卡答题位置 但是可能有问题 可以用 @input="onLog(topicItem, index)"解决 无法根据题目id找到答题位置 v-model="ExamInfo.reply[index].reply" -->
                        <div v-if="topicItem.type == '单选'">
                            <el-radio-group v-model="ExamInfo.reply[index].reply"
                                style="display: flex;flex-direction: column;align-items: flex-start">
                                <el-radio disabled v-for="optionItem in topicItem.options" :value="optionItem.option"
                                    :key="optionItem.option">
                                    {{ optionItem.option }} {{ optionItem.text }}
                                </el-radio>
                            </el-radio-group>
                            <span class="ckda">参考答案: {{ topicItem.answer }}</span>
                            <span class="df">得分: {{ ExamInfo.grade[index].grade }}</span>
                        </div>

                        <!-- 多选 -->
                        <div v-else-if="topicItem.type == '多选'">
                            <el-checkbox-group v-model="ExamInfo.reply[index].reply"
                                style="display: flex;flex-direction: column;align-items: flex-start">
                                <el-checkbox disabled v-for="optionItem in topicItem.options" :value="optionItem.option"
                                    :key="optionItem.option">
                                    {{ optionItem.option }} {{ optionItem.text }}
                                </el-checkbox>
                            </el-checkbox-group>
                            <span class="ckda">参考答案: {{ topicItem.answer }}</span>
                            <span class="df">得分: {{ ExamInfo.grade[index].grade }}</span>
                        </div>

                        <!-- 判断题-->
                        <div v-else-if="topicItem.type == '判断'">
                            <el-radio-group v-model="ExamInfo.reply[index].reply">
                                <el-radio disabled v-for="optionItem in topicItem.options" :value="optionItem.option"
                                    :key="optionItem.option">
                                    {{ optionItem.option }}
                                </el-radio>
                            </el-radio-group>
                            <span class="ckda">参考答案: {{ topicItem.answer }}</span>
                            <span class="df">得分: {{ ExamInfo.grade[index].grade }}</span>
                        </div>

                        <!-- 简答 -->
                        <div v-else-if="topicItem.type == '简答'">
                            <p style="">答：{{ ExamInfo.reply[index].reply }}</p>
                            <span class="ckda">参考答案: {{ topicItem.answer }}</span>
                            <div style="display: flex;align-items: center;margin-top: 10px;">
                                <span class="df">得分: {{ ExamInfo.grade[index].grade }}</span>
                            </div>
                        </div>

                        <!-- 编程题 -->
                        <div v-else-if="topicItem.type == '编程'" style="overflow: auto;margin-top: 20px;">
                            <div style="margin-left: 20px;">
                                答:
                                <n-code :code="ExamInfo.reply[index].reply" :hljs="hljs" language="python"
                                    show-line-numbers />
                            </div>
                            <span class="ckda">参考答案:
                                <n-code :code="topicItem.answer" :hljs="hljs" language="python" show-line-numbers />
                            </span>
                            <div style="display: flex;align-items: center;margin-top: 10px;">
                                <span class="df">得分: {{ ExamInfo.grade[index].grade }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div> 
        </div>
    </div>

</template>

<script setup>
import studentHttp from '@/api/studentHttp';
import { computed, onMounted, ref } from 'vue';
import hljs from "highlight.js"; //代码高亮
import "highlight.js/styles/atom-one-dark.css"; // 选择你喜欢的样式
hljs.highlightAll();
//定义
const props = defineProps(['answerSheetId'])
const answerSheetId = props.answerSheetId
const topicNumber = computed(() => {
    //如果拿到了数据就渲染题目数量上去
    if (ExamInfo.value.reply != undefined) {
        return ExamInfo.value.reply.length
    }
    return '获取题目数量失败'
})

const totalScore = computed(() => {
    if (ExamInfo.value.grade != undefined) {
        let sum = 0;
        ExamInfo.value.grade.forEach(element => {
            sum+=element.grade
        });
        return sum
    }
    return '获取题目数量失败'
})

const ExamInfo = ref({})

onMounted(()=>{
    getGradeDetails()
})

//获取页面数据 包括参考答案
function getGradeDetails() {
    studentHttp.getGradeDetails(answerSheetId).then((res) => {
        ExamInfo.value = res.data
        console.log(res);

    })
}
</script>

<style scoped>
/* 最大的盒子 */
.big-box {
    display: flex;
    justify-content: center;
}

.box-left {
  padding: 5px;
  width: 20%;
  /* 元素将粘在页面顶部 */
  min-width: 250px;
  border-right: 2px rgb(67, 51, 51, 0.2) dashed;
  border-radius: 10px;
}
.box-right {
    width: 80%;
    min-width: 600px;
    padding: 20px;
    margin: 15px;
    border-radius: 20px;
    border: 1px rgb(234, 219, 219, 0.1) solid;
    box-shadow: 0px 7px 30px 0px rgba(100, 100, 111, 0.2);
}

/**试题------------------------ */
.exam-main-title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* 每一题 */
.exam-details {
    margin-top: 10px;
    padding: 15px 15px 40px 15px;
    border-radius: 5px;
    min-height: 100px;
    border: 2px dashed rgba(195, 184, 186, 0.1);
    background: #fff;
}

/* 选项样式 */
.xuan-xiang-style {
    margin-top: 10px;
}

/* 修改单选选项框选中颜色 */
.xuan-xiang-style>>>.el-radio__input.is-checked .el-radio__inner {
    background-color: rgb(146, 233, 243);
    border: 1px rgb(154, 237, 248) solid;

}

/* 修改单选选中字体颜色 */
.xuan-xiang-style>>>.el-radio__input.is-checked+.el-radio__label {
    color: rgb(181, 213, 198);
}

/* 修改多项框选中的颜色 */
.xuan-xiang-style>>>.el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: rgb(146, 233, 243);
    border: 1px rgb(154, 237, 248) solid;
}

/* 修改多选框选中字体样式 */
.xuan-xiang-style>>>.el-checkbox__input.is-checked+.el-checkbox__label {
    color: rgb(181, 213, 198);
}

.ckda {
    display: grid;
    background-color: rgb(212, 208, 208, 0.2);
    padding: 5px;
    border-radius: 8px;
    margin-top: 5px;
}

.df {
    display: grid;
    padding: 8px;
    margin-top: 8px;
    border-left: 5px solid rgb(141, 28, 186);
}

/* .返回上一级 */
.answer-sheet {
  display: flex;
  justify-content: center;
  cursor: pointer;
  flex-wrap: wrap;
  border-radius: 10px;
  border: 1px rgb(190, 190, 190, 0.5) solid;
  margin: 10px;
  padding: 5px;
  transition: box-shadow 0.5s ease,background-color 0.5s ease;
}

.answer-sheet:hover {
    background-color: rgb(228, 235, 217);
  box-shadow: 0px 7px 30px 0px rgba(100, 100, 111, 0.2);
}

.grade{
    display: flex;
    padding: 10px;
    border-radius: 10px;
    background: linear-gradient(to right,rgb(179, 220, 199,0.5),rgba(207, 117, 192, 0.2));
    font-size: 20px;
    font-family: '华文新魏';
}

</style>